<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
#parse("/WEB-INF/views_webapp/layout/css.html")
#parse("/WEB-INF/views_webapp/layout/base.html")
<title>
#if($shelfName && $shelfName != "")
  $!{shelfName}
#else
  咕哒猎人
#end
</title>
<style type="text/css">
html,body{
	width: 100%;
	height: 100%;
}
#paybtns{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 0 0 1rem 0;
	height: 10rem;
	
	overflow: hidden;
	background: #fff;
}

.pabnull{
	width: 2rem;
}
#buynow{
	display: block;
	width: auto;
	height:5rem;
	background: #000;
	text-align: center;
	line-height: 5rem;
	border-radius:4px;
	font-size: 3rem;
	color: #fff;
}
.buy-scan{
	width:7rem;
}
#scanbtn{
	display: block;
	width: 5rem;
	height: 5rem;
	text-align: center;
	line-height:5rem;
	background:#CD3131;
	margin: 0 auto;
	border-radius:4px;
	font-size: 3rem;
	color: #fff;
}
#paycount{
	width: auto;
	height: 4rem;
	line-height: 4rem;
	text-align: center;
	font-size:1.5rem;
}
.red{
	color: red;
}
#firstitem{
	width: auto;
	height: auto;
	height: 100%;
	padding: 3rem 0 0 0;
	position: relative;
}
#firstitem-title{
	width: auto;
	height:5rem;
	text-align: center;
	line-height:3rem;
	font-size: 2rem;
	color: #000;
}
#firstitem-img{
	padding:0 2rem 0 2rem;
	position: relative;
}
#firstFee{
	height: 4rem;
	background:rgba(205,49,49,0.9);
	position: absolute;
	left:2rem;
	right:2rem;
	bottom: 0;
	text-align: right;
	color: #fff;
	line-height: 4rem;
	padding-right:1rem
}
#ifee1{
	font-size: 2rem;
	padding-bottom: 0.3rem;
/* 	display: block; */
}
#ifee2{
	font-size: 2.5rem;
}
#ifee3{
	font-size: 1.8rem;
	text-decoration:line-through;
	padding-left: 0.5rem
}
/**item-listbox**/
.buynowbox{
	-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  	-moz-box-flex: 1;         /* OLD - Firefox 19- */
  	-webkit-flex: 1;          /* Chrome */
  	-ms-flex: 1;              /* IE 10 */
  	flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.jflex{
  display: box;              /* OLD - Android 4.4- */
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;
}
.justifylr{
	/*-webkit-box-pack:center;
    box-pack:center;
    -webkit-box-pack:justify;
    box-pack:justify;*/
	/*-moz-box-pack:justify; 
	-webkit-box-pack:justify; 
	-o-box-pack:justify; 
	box-pack:justify;
	justify-content:space-between;
	-webkit-justify-content: space-between;
	-webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    flex-wrap:wrap;
    -moz-box-lines: multiple;
	-webkit-box-lines: multiple; 
	box-lines: multiple;*/
	-webkit-flex-wrap:wrap;
    -webkit-box-lines:multiple;
    -moz-flex-wrap:wrap;
    flex-wrap:wrap;
}
#item-listbox{
	padding:2rem 1rem 10rem 1rem;
}
.gitem{
	display: inline-block;
	width: 45%;
	border: 1px solid #eee;
	margin-bottom: 2rem;
	padding: 0.5rem;
	border-radius:4px;
	position: relative;
	/**float: left;**/
}
.gitem:nth-child(2n){
	float:right;
}
.gitem-close{
	display: block;
	width: 3rem;
	height: 3rem;
	border: 1px solid  #ccc;
	position: absolute;
	top: -1rem;
	right: -1rem;
	background: #f5f5f5;
	text-align: center;
	line-height: 2.8rem;
	border-radius: 3rem;
	font-size: 1rem;
}
.gitem-buyfee{
	font-size: 1.4rem;
}
.gitem-oldfee{
	font-size: 0.9rem;
	text-decoration:line-through
}
.gitem-fees{
	text-align: center;
}
.gitem-img{
	width: auto;
	overflow: hidden;
}
.gitem:nth-of-type(even){
	margin-right: 1rem;
}

.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
@keyframes zoomOut {
	0% {
		opacity: 1
	}
	50% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		-ms-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3)
	}
	100% {
		opacity: 0
	}
}

.zoomOut {
	-webkit-animation-name: zoomOut;
	animation-name: zoomOut
}

@-webkit-keyframes bounceOut {
	20% {
		-webkit-transform: scale3d(.9, .9, .9);
		transform: scale3d(.9, .9, .9)
	}
	50%,
	55% {
		opacity: 1;
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1)
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3)
	}
}

@keyframes bounceOut {
	20% {
		-webkit-transform: scale3d(.9, .9, .9);
		-ms-transform: scale3d(.9, .9, .9);
		transform: scale3d(.9, .9, .9)
	}
	50%,
	55% {
		opacity: 1;
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		-ms-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1)
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		-ms-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3)
	}
}

.bounceOut {
	-webkit-animation-name: bounceOut;
	animation-name: bounceOut;
	-webkit-animation-duration: .75s;
	animation-duration: .75s
}
.expBuyBtn{
	background: #848484;
}
.errotip{
	width: 100%;
	height: 3.5rem;
	background: #f5f5f5;
	border-bottom: 1px solid #eee;
	left: 0;
	top: 0;
	line-height: 3.5rem;
	padding:0 0 0 1rem;
	font-size: 1.3rem;
	color:#D14545;
	z-index: 1000;
	font-weight:bold;
}
/**item-listbox end**/
</style>
</head>
<body>
<input type="hidden" id="h5Client" value="$!{h5Client}">
#if($item.exp) 
<div class="errotip" >
<i class="iconfont icon-info"></i>
过期商品，请勿购买，后续会有专人回收并销毁！
</div>
#end

<div id="firstitem" >
	<div id="firstitem-title">
		$!{item.itemName}
	</div>
	<div id="firstitem-img">
		<img src="${item.mainImg}" class="img" id="firstitem-mainImg"/>
		<div id="firstFee">
			<div>
				#if($item.hasDiscount)
					#set($fee = $!item.discountPrice)
					<!-- 有优惠 -->
					<span id="ifee1"><!-- 优惠价 --></span>
					<span id="ifee2">￥&nbsp;$!item.discountPrice</span>
					<span id="ifee3"><!-- 原价 -->￥&nbsp;$!item.retailPrice</span>
				#else
					#set($fee = $!item.retailPrice)
					<!-- 无优惠 -->
					<input type='hidden' class="itemPrice" value="$!item.retailPrice">
					<span id="ifee2">￥&nbsp;$!{item.retailPrice}</span>
					<span id="ifee3" class="hide"></span>
				#end
			</div>
		</div>
	</div>
</div>

<div id="item-listbox" class="hide" style="overflow-y:scroll">
	<div id="firstgitem" class="gitem animated gitem-small" data-title="$!item.itemName">
		<input type="hidden" class="itemId" value="$!{item.id}">
		<div class="gitem-img">
			<img src="${item.mainImg}" class="img mainImg" alt="加载中..."/>
		</div>
		<div class="gitem-fees">
			#if($item.hasDiscount)
				<!-- 有优惠 -->
				<span class="gitem-buyfee red">￥&nbsp;$!{item.discountPrice}</span>
				<span class="gitem-oldfee">￥&nbsp;$!item.retailPrice</span>
				<input type="hidden" class="itemPrice" value="$!{item.discountPrice}">
			#else
				<!-- 无优惠 -->
				<input type="hidden" class="itemPrice" value="$!item.retailPrice">
				<span class="gitem-buyfee red">￥&nbsp;$!item.retailPrice</span>
			#end
		</div>
		<a class="gitem-close" href="#" onclick="bindDel(this)"><i class="iconfont icon-close"></i></a>
	</div>
</div>
<input type="hidden" value="$!item.exp" id="itemIsExp">
<div id="paybtns">
	<div id="paycount">
		总共需要支付：<span class="red" id="feecount">$!{fee}</span>
	</div>
	<div class="jflex">
		<div class="pabnull"></div>
		<div class="buynowbox">
			#if($item.exp) 
				<a id="buynow" style="background: #848484;font-size: 2.5rem;">过期商品,请勿购买</a>
			#else
				<a id="buynow">立即购买</a>
			#end
		</div>
		<div class="buy-scan">
			<a id="scanbtn" class="iconfont icon-saoyisao"></a>
		</div>
		<div class="pabnull"></div>
	</div>
<!-- 	<div style="font-size: 8px;">$!{h5Client}-调试信息:用户ID:${thirdUserId}</div> -->
</div>

<script id="item-tpl" type="text/html">
	<div class="gitem animated gitem-small" data-title="{{itemName}}">
		<input type="hidden" class="itemId" value="{{id}}">
		<div class="gitem-img">
			<img src="{{mainImg}}" class="img mainImg" alt="加载中..."/>
		</div>
		<div class="gitem-fees">
			{{if hasDiscount}}
				<span class="gitem-buyfee red">￥{{discountPrice}}</span>
				<span class="gitem-oldfee">￥{{retailPrice}}</span>
				<input type="hidden" class="itemPrice" value="{{discountPrice}}">
			{{else}}
				<span class="gitem-buyfee red">￥{{retailPrice}}</span>
				<input type="hidden" class="itemPrice" value="{{retailPrice}}">
			{{/if}}
		</div>
		<a class="gitem-close" href="#" onclick="bindDel(this)"><i class="iconfont icon-close"></i></a>
	</div>
</script>
#parse("/WEB-INF/views_webapp/layout/bottom.html")
#if($h5Client == "zfb")
	<script type="text/javascript" src="https://as.alipayobjects.com/g/component/antbridge/1.1.1/antbridge.min.js"></script>
	<script type="text/javascript" src="$!{path}/static/res/webapp/js/item/zfb_qr_scan.js"></script>
#elseif($h5Client == "wx")
	<!--如果是微信客户端，需要以下代码--->
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="$!{path}/static/res/webapp/js/item/wx_qr_scan.js"></script>
	<script type="text/javascript">
		try {
			wx.config({
				// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				debug : false, 
				// 必填，公众号的唯一标识
				appId : '${config.appId}', 
				// 必填，生成签名的时间戳
				timestamp : '${config.timestamp}', 
				// 必填，生成签名的随机串
				nonceStr : '${config.nonceStr}', 
				// 必填，签名，见附录1
				signature : '${config.signature}',
				// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				jsApiList : [ 'scanQRCode' ]
			});
		} catch (e) {
			$.ui.alert("系统提示:", "微信config初始化异常!");
		}
		wx.ready(function() {
			WeixinJSBridge.call('hideOptionMenu');
		});
	</script>
#elseif($h5Client == "dd")
	<script type="text/javascript" src="http://g.alicdn.com/ilw/ding/0.7.3/scripts/dingtalk.js"></script>
	<script type="text/javascript">
	var _config = ${config};
	var needLogin = ${needLogin};
	dd.config({
				agentId : _config.agentid,
				corpId : _config.corpId,
				timeStamp : _config.timeStamp,
				nonceStr : _config.nonceStr,
				signature : _config.signature,
				jsApiList : [ 'runtime.info', 'biz.contact.choose',
						'device.notification.confirm', 'device.notification.alert',
						'device.notification.prompt', 'biz.ding.post',
						'biz.util.openLink','biz.user.get',"biz.util.scan" ]
	});
	
	dd.ready(function() {
		dd.runtime.info({
			onSuccess : function(info) {
			},
			onFail : function(err) {
				alert('fail-runtime: ' + JSON.stringify(err));
			}
		});
	
		if(needLogin){
			dd.biz.user.get({
			    onSuccess: function (info) {
			    	//调用后台接口-自动登录
			    	//alert(JSON.stringify(info));
			    	var userInfo = {"corpId":_config.corpId, "nickName": info.nickName, "thirdUserId":info.id, "avatar": info.avatar};
			    	autoLogin(userInfo);
			    },
			    onFail: function (err) {
			    	alert("错误:"+JSON.stringify(err));
			    }
			});
		}
	});
	
	dd.error(function(err) {
		alert('钉钉发生错误: ' + JSON.stringify(err));
	});
	
	function autoLogin(userInfo){
		$.ajax({
		    type: 'POST',
		    url: path+"/h5/dd/login" ,
		    data: userInfo,
		    dataType:"json",
		    success: function(resp){
		    	if(resp.data == null){
		    		$.ui.unmask();
					return $.ui.alert("系统提示:", "未查询到商品信息!");
		    	}
		    	if(resp.code != 200){
		    		$.ui.unmask();
					return $.ui.alert("系统提示:", resp.msg);
		    	}
		    	
		    	var data = resp.data;
		    	
		    } ,
		    error : function() {  
	    		$.ui.unmask();
	    		$.ui.alert("系统提示:", "查询商品信息异常！");
	    	} 
		});
	}
	
	function ddQrScan(callback){
		dd.biz.util.scan({
		    type: "qrCode",
		    onSuccess: function(data) {
		    	callback(data.text);
		    },
		   onFail : function(err) {
			   alert("扫描二维码失败!");
		   }
		});
	} 
	</script>
#else
#end

<script type="text/javascript">
//获取屏幕的宽度
	var h5Client = document.getElementById("h5Client").value;
	var itemIsExp = $("#itemIsExp").val();
	$(function(){
		$("#scanbtn").click(function(){
			scan();
		});
		//购买
		$("#buynow").click(function(){
			if(itemIsExp == "true"){
				return;
			}
			$.ui.mask("客官稍等……");
			//获取所有购买的商品id
			var ids = $(".itemId");
			var idArray = new Array();
			$.each(ids, function(index, row){ 
				idArray.push($(row).val());
			});
			var idsStr = idArray.join(",");
			if(h5Client == "zfb"){
				window.location.href = path + "/h5/zfb/pay?ids=" + idsStr;
			}else if(h5Client == "wx"){
				window.location.href= path + "/h5/wx/pay?ids=" + idsStr;
			}else if(h5Client == "dd"){
				window.location.href = path + "/h5/zfb/pay?ids=" + idsStr;
			}
		});
		
	});
	
	function bindDel(ele){
			var that=$(ele).parent();
			//$.ui.confirm("删除确认","我辣么好吃，确认不要了？",function(){
				minusTotalFee(that.children(".gitem-fees").find(".itemPrice").val());
				that.addClass("bounceOut");
				window.setTimeout(function(){
					  $(ele).parent().remove();
					  if($(".gitem").length==1){
						var lastItem = $(".gitem");
						//商品标题
					 	document.getElementById("firstitem-title").innerHTML= $(".gitem").attr("data-title");
						//销售价格
						document.getElementById("ifee2").innerHTML= $(".gitem").find(".gitem-buyfee").html();
						
						document.getElementById("firstitem-mainImg").setAttribute("src", document.querySelector(".mainImg").getAttribute("src"));
						
						if($(".gitem").find(".gitem-oldfee").length > 0){
							//原价
							$("#ifee3").removeClass("hide").show();
							document.getElementById("ifee3").innerHTML="原价"+ $(".gitem").find(".gitem-oldfee").html();
							//是否显示优惠价三个字
							$("#ifee1").removeClass("hide").show();
						}else{
							$("#ifee2").html($(".gitem").find(".gitem-buyfee").html());
							$("#ifee3").hide();
							$("#ifee1").hide();
						} 
						
						$("#firstitem").show();
	    		        $("#item-listbox").hide();
					}
				},1000);
			//});
	}
	
	function scan(){
		if(h5Client == "zfb"){
			eval("zfbQrScan(addItem)")
		}else if(h5Client == "wx"){
			eval("wxQrScan(addItem)")
		}else if(h5Client == "dd"){
			eval("ddQrScan(addItem)")
		}
	}
	
	function addItem(qrData){
		if(qrData == null || qrData == ""){
			return $.ui.alert("系统提示:", "二维码数据为空!");
		}
		var id = qrData.substring(qrData.lastIndexOf("/") + 1,qrData.length);
		if(id == ""){
			return $.ui.alert("系统提示:", "二维码数据中不包含商品信息!");
		}
		
		//判断商品是否已扫过码
		if($(".itemId[value='" +id+ "']").length > 0){
			return $.ui.alert("系统提示:", "此商品已扫码!");
		}
		
		if(itemIsExp == "true"){
			var ids = $(".itemId");
			var idArray = new Array();
			$.each(ids, function(index, row){ 
				idArray.push($(row).val());
			});
			
			if(ids.length == 1){
				window.location.href = qrData;
			}
			
			return;
		}
		
    	//从服务器获取商品信息
    	$.ui.mask("客官稍等……");
		$.ajax({
		    type: 'POST',
		    url: path+"/h5/item/getItem" ,
		    data: {id:id},
		    dataType:"json",
		    success: function(resp){
		    	if(resp.data == null){
		    		$.ui.unmask();
					return $.ui.alert("系统提示:", "未查询到商品信息!");
		    	}
		    	if(resp.code != 200){
		    		$.ui.unmask();
					return $.ui.alert("系统提示:", resp.msg);
		    	}
		    	
		    	var data = resp.data;
		    	if(data.exp){
		    		$.ui.unmask();
		    		$.ui.alert("系统提示:", "您刚刚扫描的商品已过期<br>请勿购买，后续会有专人回收并销毁");
		    		return; 
		    	}
		    	
		    	//获取第一个商品的宽度，用于
	    		var _tpl=template("item-tpl",data);
	    		//如果是第二个
	    		$(".foodinfo100").removeClass("foodinfo100");
	    		//if($("#item-listbox").is(":hidden")){
	    		       $("#firstitem").hide();
	    		       $("#item-listbox").show();
	    		//}
	    		document.getElementById("item-listbox").insertAdjacentHTML("beforeEnd", _tpl);
	    		$(".gitem-img").height($(".gitem-img").width());
	    		//更新总价
	    		var nowCount=$("#feecount").html();
	    		var price = 0;
	    		if(data.hasDiscount){
	    			price = data.discountPrice;
	    		}else{
	    			price = data.retailPrice;
	    		}
	    		var fee = parseFloat(nowCount) + parseFloat(price);
    			fee = fee.toFixed(2);
	    		$("#feecount").html(fee);
	    		
	    		$.ui.unmask();
		    } ,
		    error : function() {  
	    		$.ui.unmask();
	    		$.ui.alert("系统提示:", "查询商品信息异常！");
	    	} 
		});
	}
	
	function minusTotalFee(fee){
		var feecount = $("#feecount").html();
		var fee = parseFloat(feecount) - parseFloat(fee);
		fee = fee.toFixed(2);
		$("#feecount").html(fee);
	}
	
</script>
</body>
</html>